<template>
<div class="statistics-rule-wrap">
    <el-form
        class="m7-form demo-ruleForm"
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormRef"
        label-width="100px"
        :label-position="'top'"
      >
        <el-form-item prop="status">
          <span slot="label">
            外呼记忆 <el-switch v-model="ruleForm.status" active-color="#2ED47A" style="margin-left:4px;"></el-switch>
            <p class="label-p">开启时，当座席外呼客户号码，无论是否被接听，此号码来电时将优先转给此座席接待，如果座席忙碌或不在线时可转给选择语音导航。（自动外呼场景无效）</p>
          </span>
        </el-form-item>
        <div v-if="ruleForm.status">
          <el-form-item prop="expire">
            <span slot="label">
              有效期
              <p class="label-p">记忆的最大期限，将在有效期内找到上一次外呼的座席进行记忆。</p>
            </span>
            <el-input class="custom-width" v-model="ruleForm.expire">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
          <el-form-item prop="ivrId">
            <span slot="label">
              座席忙或不在线，来电转至语音导航
            </span>
            <m7Select
              size="mini"
              class="custom-width"
              v-model="ruleForm.ivrId"
              :placeholder="'请选择语音导航'"
              filterable
              clearable
              :options="ivrList"
              :defaultProps="{ label: 'name', value: '_id' }"
            >
            </m7Select>
          </el-form-item>
          <el-form-item prop="serviceNumberList">
            <span slot="label">
              应用服务号
              <p class="label-p">当客户通过选中服务号来电的时候，会直接转给记忆座席。否则将进入服务号对应的语音导航流程。</p>
            </span>
            <m7Select
              size="mini"
              class="custom-width"
              v-model="ruleForm.serviceNumberList"
              :placeholder="'请选择应用服务号'"
              filterable
              clearable
              multiple
              :options="serviceNumberList"
              :defaultProps="{ label: 'labelName', value: '_id' }"
            >
            </m7Select>
          </el-form-item>
        </div>
      </el-form>
      <el-button size="mini" type="primary" class="fr" @click="saveFun">保存</el-button>
</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { BasicModule } from '@/store/modules/config/basic'
import { isNumber2 } from '@/utils/validate'
interface RuleFromData {
  status: boolean,
  expire: number,
  ivrId: string,
  serviceNumberList: string[]
}
@Component({
  name: 'StatisticsRule',
  components: {}
})
export default class extends Vue {
  private $message: any
  private $confirm: any
  private $getCache: any
  private serviceNumberList: object[] = []
  private ivrList: object[] = []

  private ruleForm: RuleFromData = {
    status: false,
    expire: 7,
    ivrId: '',
    serviceNumberList: []
  }

  private rules: object = {
    expire: [{ trigger: 'blur', validator: this.validateNumber }],
    ivrId: [{ required: true, message: '请选择语音导航', trigger: 'change' }]
  }

  private validateNumber (rule: any, value: string, callback: any) {
    if (!isNumber2(value)) {
      callback(new Error('请输入正整数'))
    } else if (parseInt(value, 10) < 1 || parseInt(value, 10) > 30) { // 速挂
      callback(new Error('范围为1~30天'))
    } else {
      callback()
    }
  }

  private saveFun () {
    (this as any).$refs.ruleFormRef.validate((valid) => {
      if (valid) {
        this.ruleForm.expire = Number(this.ruleForm.expire)
        const data = { url: '/call/action/memory/save', method: 'POST', data: this.ruleForm }
        BasicModule.BasicCommonAction(data).then((res: any) => {
          if (res && res.success) {
            this.$message({ message: '保存成功', type: 'success' })
          }
        })
      } else {
        return false
      }
    })
  }

  private fetchData () {
    this.$getCache('/call/action/general/query', ['dialoutMemory'], false).then((resp) => {
      if (resp && resp.success && resp.dialoutMemory) {
        Object.keys(resp.dialoutMemory).forEach(key => {
          if (this.ruleForm[key] !== undefined) {
            this.ruleForm[key] = resp.dialoutMemory[key]
          }
        })
      }
    })
  }

  private beforeMount () {
    this.fetchData()
    this.$getCache('/call/action/general/query', ['serviceNumberList', 'ivrList'], false).then((resp) => {
      const serviceNumberList = resp.serviceNumberList || []
      serviceNumberList.forEach((item: any) => {
        item.labelName = `${item.number}${item.name}`
      })
      this.serviceNumberList = serviceNumberList
      this.ivrList = resp.ivrList || []
    })
  }
}
</script>

<style lang="stylus" scoped>
.warn-text
  background $bgc-reminder
  padding 14px
  margin-bottom 20px
  border-radius 4px
  line-height 1.5
  .el-icon-info
    color $c-warn
    padding-right 6px
    font-size 14px
    vertical-align middle
.label-p
   color $fc-gray3
   margin-top 6px
.statistics-rule-wrap
  border 1px solid $border-main
  box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
  border-radius 10px
  overflow hidden
  padding 24px
  border-radius 10px
  height calc(100% - 40px)
  overflow auto
  box-sizing border-box
.custom-width
  width 200px
</style>
